<template>
  <div class="p-4 bg-white mt-3">
    <div class="card-head display-flex ai-center border-b pb-3">
      <i class="iconfont" :class="`icon-${icon}`"></i>
      <div class="flex-1 font-xl ml-2 ">{{title}}</div>
      <i class="iconfont" :class="`icon-${iconBack}`"></i>
    </div>
    <div class="card-body mt-3">
      <div class="nav display-flex jc-between font-l">
        <div class="nav-item" :class="{active:active === i}" v-for="(category,i) in categories" :key="i" @click="$refs.list.$swiper.slideTo(i)">
            <div class="body-h-link">{{category.name}}</div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="pt-2">
        <swiper :options="{autoHeight:true}" ref="list" @slide-change="()=>{active =$refs.list.$swiper.realIndex}">
          <swiper-slide v-for="(category,i) in categories" :key="i" >
              <slot name="items" :category="category"></slot>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  name: "Card",
  data() {
    return {
      active: 0
    }
  },
  props: {
    title: {type: String, require: true},
    icon: {type: String, require: true},
    iconBack: {type: String, require: true},

    categories: {type: Array, require: true}
  },
  methods: {
  }
}
</script>

<style scoped lang="scss">

</style>